import Vector2 from "../global/Vector2"
const width = document.body.offsetWidth
const height = document.body.offsetHeight
// 屏幕中心坐标 或者获取h1元素的中心坐标，h1居中，中心坐标和屏幕中心坐标一样的
const center = new Vector2(width / 2, height / 2)

let copys = document.querySelectorAll('.copy')
const offset = 0.01

const mouseMove = (e: MouseEvent) => {
    // 鼠标坐标
    const { x, y } = e
    const mouse = new Vector2(x, y);
    // 以文字中心为中点，计算出鼠标所在位置
    const vector2 = center.clone().sub(mouse)

    const l = copys.length

    for (let i = 1; i <= l; i++) {
        // 根据鼠标归一化位置计算出不同的copy图层该在的位置
        const span = copys[i - 1] as any
        span.style.transform = `perspective(500px) 
        rotate(${vector2.x * i * offset}deg) 
        translate3d(0px,${vector2.y * i * offset * 5}px, ${-15 * i}px) 
        skew(${(vector2.y * offset) * i}deg)`;
    }

}


window.addEventListener('mousemove', mouseMove)
